<template>
    <div class="set w944">
        <alert ref="alert"></alert>
        <deleteAlert ref="deleteAlert"></deleteAlert>
        <div class="label_top">
            <p><i class="line"></i>账号管理</p>
        </div>
        <div class="label_table">
            <div class="el-tabs-report">
                <a class="listOne" @click="administrator" v-if="setAdmin.glyqx_add">新增管理员</a>
            </div>
            <el-table ref="multipleTable" :data="tableData" border @selection-change="handleSelectionChange">
                <el-table-column label="编号" width="60">
                    <template slot-scope="scope">{{ scope.row.sort}}</template>
</el-table-column>
<el-table-column prop="nickname" label="管理员"></el-table-column>
<el-table-column prop="roleName" label="角色"></el-table-column>
<el-table-column prop="phone" label="联系方式"></el-table-column>
</el-table-column>
<el-table-column label="状态">
    <template slot-scope="scope">
                        <el-switch class="switchStyle" v-model="scope.row.status" active-color="#44cef6"
                            inactive-color="#999" active-text="开启" inactive-text="关闭" :active-value="1"
                            :inactive-value="2" v-show="scope.row.adminStatus" @change="changeSwitch(scope.row)"
                            v-if="setAdmin.glyqx_switch"></el-switch>
                    </template>
</el-table-column>
<el-table-column label="操作">
    <template slot-scope="scope">
                        <el-button @click="handleEdit(scope.row)" v-show="scope.row.adminStatus"
                            v-if="setAdmin.glyqx_edit">编辑</el-button>
                        <!-- <el-button @click="resetPassWord(scope.row)" v-show="scope.row.adminStatus"
                            v-if="setAdmin.glyqx_reset" class="blue">重置密码</el-button> -->
                        <el-button @click="handleDelete(scope.row)" v-show="scope.row.adminStatus"
                            v-if="setAdmin.glyqx_del" class="red">删除</el-button>
                    </template>
</el-table-column>
</el-table>
</div>
<div class="pag_block" style="margin-top: 15px;">
    <el-pagination @current-change="handleCurrentChange" :current-page="currentpage" :page-size="pagesize" layout="prev, pager, next" :total="total"></el-pagination>
</div>
</div>
</template>
<script>
    import alert from '../../components/Alert.vue';
    import deleteAlert from '../../components/deleteAlert.vue';
    export default {
        data() {
            return {
                sort: '',
                setAdmin: '',
                nowType: 'add',
                adminStatus: true,
                updateTitle: '新增管理员',
                wrapShow: false,
                addFormVisible: false, //新增界面是否显示
                tableData: [],
                pagesize: 15,
                currentpage: 1,
                total: 1,
                roleName: '',
                phone: '',
            }
        },
        methods: {
            getTableList() {
                this.$ajax({
                    url: this.$root.jifuUrl + "/getBackUserPage?" + 'page=' + this.currentpage + '&num=' + this.pagesize + '&rootcompanyid=1',
                    method: 'GET',
                    data: {},
                    success: res => {
                        if (res.data.code == 200) {
                            this.tableData = res.data.data.list;
                            this.total = res.data.data.pageParam.items;
                            this.tableData.forEach(element => {
                                if (element.nickname == 'admin') {
                                    element.adminStatus = true;
                                } else {
                                    element.adminStatus = true;
                                }
                            });
                            for (var i = 0; i < this.tableData.length; i++) {
                                this.tableData[i].sort = i + 1
                            }
                        }
                    }
                });
            },
            handleEdit(row) {
                this.$ajax({
                    url: this.$root.jifuUrl + "/getBackUserById?" + 'id=' + row.id,
                    method: 'GET',
                    data: {},
                    success: res => {
                        if (res.data.code == 200) {
                            console.log('-handleEdit--getBackUserById---', res.data.data)
                            this.$router.push({
                                name: 'newAdmin',
                                params: {
                                    type: 'edit'
                                }
                            })
                            this.$root.adminMsg = res.data.data;
                        }
                    }
                });
            },
            handleDelete(row) {
                this.transitionRow = row;
                this.$rootFunction().rootDelete();
            },
            deleteSubmit() {
                var s = {
                    id: this.transitionRow.id,
                    status: 0
                };
                this.$ajax({
                    url: this.$root.jifuUrl + "/updateBackUserStatus",
                    method: 'POST',
                    data: this.qs.stringify(s),
                    success: res => {
                        if (res.data.code == 200) {
                            this.$rootFunction().deleteResSuccess();
                        } else {
                            this.failText = res.data.message;
                            this.$rootFunction().deleteResFail();
                        }
                    }
                })
            },
            changeSwitch(row) {
                if (row.status == 1) {
                    var s = {
                        id: row.id,
                        status: 1
                    };
                    this.$ajax({
                        url: this.$root.jifuUrl + "/updateBackUserStatus",
                        method: 'POST',
                        data: this.qs.stringify(s),
                        success: res => {
                            if (res.data.code == 200) {
                                console.log('当前用户状态为', row.status);
                            }
                        }
                    });
                } else if (row.status == 2) {
                    var s = {
                        id: row.id,
                        status: 2
                    };
                    this.$ajax({
                        url: this.$root.jifuUrl + "/updateBackUserStatus",
                        method: 'POST',
                        data: this.qs.stringify(s),
                        success: res => {
                            if (res.data.code == 200) {
                                console.log('当前用户状态为', row.status);
                            }
                        }
                    });
                }
            },
            handleCurrentChange(value) {
                this.currentpage = value;
                this.getTableList();
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row, !this.allSelect)
                    })
                    this.allSelect = !this.allSelect;
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            resetPassWord(row) {
                this.$ajax({
                    url: this.$root.jifuUrl + "/mns/user/resetUserPassword",
                    headers: {
                        'ContentType': 'application/json; charset=utf-8'
                    },
                    method: 'POST',
                    data: {
                        id: row.id
                    },
                    success: res => {
                        if (res.data.code == 200) {
                            this.$refs.alert.show({
                                alertText: '重置成功',
                                alertSubmit: function() {
                                    alertStatus: 0
                                }
                            });
                            setTimeout(() => {
                                this.$router.go(0);
                            }, 2000)
                        } else {
                            this.failText = res.data.message;
                            this.$rootFunction().deleteResFail();
                        }
                    }
                })
            },
            administrator() {
                this.$router.push({
                    path: '/newAdmin'
                })
            }
        },
        components: {
            alert,
            deleteAlert
        },
        mounted: function() {
            this.getTableList();
            this.setAdmin = this.$root.huasan.setAdmin;
        }
    }
</script>

<style>
    .set .label_table .switchStyle span.el-switch__label--left {
        left: 7px;
    }
    
    .set .label_table .switchStyle span.el-switch__label--right {
        left: -17px;
    }
</style>